import React, { useEffect, useState } from 'react';
import { Form, Select, Button, Typography, Flex, Input, Image, Upload, Tag } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useNavigate, useLocation } from 'react-router-dom';
import ZoomButton from '../../Components/ZoomButton';
import './index.scss'

const { Title } = Typography;
const SEMComparison = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const [form] = Form.useForm();
  const [zoom, setZoom] = useState(0);
  const queryParams = location?.state || {};
  const { page } = queryParams;
  if (!page) {
    navigate('/search/list');
  };
  const onBack = () => {
    navigate(-1)
  }

  //判断是否有不同值
  const areValuesEqual = (arr, key) => {
    let firstValue = arr[0][key];
    for (let i = 1; i < arr.length; i++) {
      if (arr[i][key] !== firstValue) {
        return false;
      }
    }
    return true;
  }

  const MOCK_DATA = [{
    name: "feng",
    product: "egg"
  }, {
    name: "wang",
    product: "egg"
  }, {
    name: "wang",
    product: "egg"
  }]

  return (
    <div className='wrapSEMComparison'>
      <div className='page-title-wrap'>
        <Flex align='center' >

          <Title className='fontStyleH2' level={2} style={{ cursor: 'pointer' }} onClick={onBack}>
            <LeftOutlined style={{ fontSize: 16, marginRight: 5, }} />
            {page === 'SEM' ? t('search.semComparison') : t('search.irComparison')}
          </Title>
        </Flex>
      </div>
      <div className='page-content-wrap'>
        <Form form={form} className='filter-wrap'>
          <Flex align='center' gap={8}>
            <Form.Item name="bu"
              label={t('common.bu')} style={{ flex: 1 }} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
              <Select mode="multiple" placeholder={t('common.pleaseSelect')} allowClear />
            </Form.Item>
            <Form.Item label=" " labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
              <Flex justify='flex-end' gap={16}>
                <Button type="primary" ghost>{t('common.search')}</Button>
                <Button>{t('common.clear')}</Button>
                <ZoomButton
                  onChange={setZoom}
                  value={zoom} />

              </Flex>
            </Form.Item>
          </Flex>
        </Form>
        <div className='content'>
          {
            page === 'IR' && (
              <div className='irBox'>
                <Image
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  style={{ width: 395 + (zoom * 50), height: 395 + (zoom * 50) }}
                  className="irImg" />
              </div>
            )
          }

          <Flex className="list">
            {
              MOCK_DATA.map((d, i) => {
                const keys = Object.keys(d)

                return (
                  <div className='item' key={i}>
                    {
                      page === 'SEM' && (
                        <>
                          <Image
                            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            style={{ width: 200 + (zoom * 50), height: 200 + (zoom * 50) }}
                            className="img" />
                          <div className='imgName'>Image name.jpg</div>
                        </>
                      )
                    }
                    {
                      keys.map(key => {
                        const isEqual = areValuesEqual(MOCK_DATA, key)
                        console.log("🚀 ~ MOCK_DATA.map ~ isEqual:", isEqual)
                        return (
                          <div className='li'>
                            <span className='label'>{key}：</span>
                            <span className={!isEqual && 'active'}>{d[key]}</span>
                          </div>
                        )
                      })
                    }

                    <div className='tagBox'>
                      <Tag closable={true}>item</Tag>
                    </div>
                  </div>
                )
              })
            }
          </Flex>
        </div>

      </div>
    </div>
  )
}

export default SEMComparison;
